<template>
    <div class="CremationData  h100" v-loading="loading">
      <div class="PageContent">
        <el-form :model="ruleForm" :inline="true" ref="ruleForm" label-width="90px" class="PageItem margintop20">
          <el-row :gutter="5" class="fileSearch">
            <el-form-item label="业务编码:" >
              <el-input v-model="ruleForm.businessCode" ></el-input>
            </el-form-item>
            <el-form-item label="逝者姓名:">
              <el-input v-model="ruleForm.deadName" ></el-input>
            </el-form-item>
            <el-form-item label="火化预约日期:" prop="name" label-width="120px">
              <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.appointmentDateStart"   format="yyyy-MM-dd" ></el-date-picker>
              -
              <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.appointmentDateEnd"   format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary"  v-if="btnRight.btnCremationDataSearch" @click="onSubmit('search')">查询</el-button>
              <el-button type="primary" plain  v-if="btnRight.btnCremationDataExport" @click="openExecl">导出Excel</el-button>
            </el-form-item>
          </el-row>
          <el-table
            :data="tableData"
            :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
            stripe
            border
            :height="tableHeight">
            <el-table-column sortable align = 'center'  prop="businessCode"  label="业务编码"  width="200">
            </el-table-column>
            <el-table-column
              prop="deadName"
              align = 'center'
              label="逝者姓名"
              width="200">
            </el-table-column>
            <el-table-column
              prop="deadGender"
              align = 'center'
              label="性别"
              width="100">
            </el-table-column>
            <el-table-column
              prop="deadAge"
              align = 'center'
              label="年龄"
              width="100">
            </el-table-column>
            <el-table-column
              prop="certificateNo"
              align = 'center'
              label="证件号码"
              width="200">
            </el-table-column>
            <el-table-column
              prop="furnaceType"
              align = 'center'
              label="火化炉型"
              width="200">
            </el-table-column>
            <el-table-column
              prop="furnaceCode"
              align = 'center'
              label="火化炉号"
              width="200">
            </el-table-column>
            <el-table-column
              prop="appointmentDate"
              align = 'center'
              label="火化预约日期"
              width="200">
            </el-table-column>
            <el-table-column
              prop="asAppointmentText"
              align = 'center'
              label="是否预约"
              width="100">
            </el-table-column>
            <el-table-column
              prop="appointmentTimeSegment"
              align = 'center'
              label="火化预约时间段"
              width="150">
            </el-table-column>
            <el-table-column
              prop="cremationNo"
              align = 'center'
              label="火化证号"
              width="120">
            </el-table-column>
          </el-table>
          <div style="text-align: center;
                      height: 0px;
                      line-height: 20px;
                      font-size: 18px;">
            显示{{pager.total===0?0:(Math.ceil(pager.total/pager.pageSize)>1?((pager.currentPage-1)*pager.pageSize+1):(1))}}到{{pager.total===0?0:((Math.ceil(pager.total/pager.pageSize)===pager.currentPage)?(pager.total):(pager.currentPage*pager.pageSize))}}条
          </div>
          <p style="text-align: right;margin-top: 20px;">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pager.currentPage"
              :page-size="pager.pageSize"
              :page-sizes="[10,20,30,50]"
              background
              layout="total,sizes,prev, pager, next, jumper"
              :total="pager.total">
            </el-pagination>
          </p>
        </el-form>
      </div>
    </div>
</template>

<script>
  import * as Type from '@/api/service'
  import {dataFormatetmd} from '@/utils/index'
  import download from "@/api/download"
  export default {
    name: "CremationData",
    data(){
      return{
        loading:false,
        type:[],
        ruleForm: {
          "businessCode": "",
          "deadName": "",
          "appointmentDateStart": "",
          "appointmentDateEnd": "",
          "pageSize": 0,
          "currentPage": 0,
          "exportExcelFlag": 0,
          "orderField": "",
          "orderType": ""
        },
        pager:{
          "pageSize": 20,
          "total": 1,
          "currentPage": 1
        },
        tableData: [],
        tableHeight:0,
        //按钮权限
        btnRight: {
          btnCremationDataSearch: true, //查询
          btnCremationDataExport: true,//导出excel
        }
      }

    },//载入按钮
    mounted(){
      this.btnRight = this.$route.meta.buttons;
      //遍历属性赋值将true与false字符串转换成布尔型的值
      for (var key of Object.keys(this.btnRight)) {
        this.btnRight[key]=(this.btnRight[key]|| this.btnRight[key]=="true")?true:false;
      }
      this.onSubmit()
      var that=this
      window.onresize=function() {
        var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
        var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
        that.tableHeight =dom - search - 110
      }
      },
    //注销window.onresize事件
    destroyed(){
      window.onresize = null;
    },
    updated(){
      this.$nextTick(()=>{
        var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
        var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
        this.tableHeight =dom - search - 110
      })
    },
    methods:{
      onSubmit(value){
        this.loading=true
        if (value) {
          this.pager.currentPage = 1;
        }
        var postData = {
          "businessCode": this.ruleForm.businessCode,
          "deadName": this.ruleForm.deadName,
          "appointmentDateStart": dataFormatetmd(new Date(this.ruleForm.appointmentDateStart)),
          "appointmentDateEnd": dataFormatetmd(new Date(this.ruleForm.appointmentDateEnd)),
          "pageSize": this.pager.pageSize,
          "currentPage": this.pager.currentPage,
          "exportExcelFlag": 0,           //表示显示 1表示导出execl
          "orderField	":"",     //排序字段
          "orderType":""        //排序顺序
        }
        //查询火化档案的接口
        Type['loadCremationData'](postData).then(response => {
          const { data }=response;
          if (!data) {
            this.loading = false;
            this.$message('数据读取失败')
            return
          }

          this.tableData = data.list
          this.pager = data.pager
          this.loading=false
          //   //数据读取成功
        }).catch(error => {
          this.$message(error)
          this.loading=false
          this.tableData = []
        })
      },
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function (size) {
        this.pager.pageSize = size;
        this.onSubmit()  //点击第几页
      },
      handleCurrentChange: function(currentPage){
        this.pager.currentPage = currentPage;
        this.onSubmit()  //点击第几页
      },
      openExecl(){
        // window.location.href = "excel地址"
        var postData = {
          "businessCode": this.ruleForm.businessCode,
          "deadName": this.ruleForm.deadName,
          "appointmentDateStart": dataFormatetmd(new Date(this.ruleForm.appointmentDateStart)),
          "appointmentDateEnd": dataFormatetmd(new Date(this.ruleForm.appointmentDateEnd)),
          "pageSize": this.pager.pageSize,
          "currentPage": this.pager.currentPage,
          "exportExcelFlag": 1,           //表示显示 1表示导出execl
          "orderField	":"",     //排序字段
          "orderType":""        //排序顺序
        }
        download.exportExcel(Type["CremationDataEXPEXC"],postData,"火化数据_"+download.getDateTime()+".xlsx");
      },
    }
  }
</script>

<style scoped>

</style>
